<template>
  <div
    class="container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="top" :style="dataBg">
      <div class="item" @click="showTable(3)">
        <div class="iten_son" :style="personnel">
          <div class="personnelNumber">
            {{ isSpecialFood.unitCanteenTotal }}
          </div>
        </div>
        <div class="personnelcolor">单位食堂</div>
      </div>
      <div class="item" @click="showTable(0)">
        <div class="iten_son" :style="personnel">
          <div class="personnelNumber">
            {{ isSpecialFood.foodProductionTotal }}
          </div>
        </div>
        <div class="personnelcolor">食品生产</div>
      </div>
      <div class="item" @click="showTable(2)">
        <div class="iten_son" :style="personnel">
          <div class="personnelNumber">
            {{ isSpecialFood.cateringBusinessTotal }}
          </div>
        </div>
        <div class="personnelcolor">餐饮服务</div>
      </div>
      <div class="item" @click="showTable(1)">
        <div class="iten_son" :style="personnel">
          <div class="personnelNumber">
            {{ isSpecialFood.circulationTotal + isSpecialFood.foodSalesTotal }}
          </div>
        </div>
        <div class="personnelcolor">食品流通</div>
      </div>
      <!-- {bodycount: 4, bodyindustry: "单位食堂", count: 4}
1: {bodycount: 6, bodyindustry: "食品生产经营者", count: 6}
2: {bodycount: 17, bodyindustry: "餐饮服务经营者", count: 6}
3: {bodycount: 40, bodyindustry: "食品流通经营者", count: 14} -->
      <!-- <div class="item" v-for="(item,index) in data.bodyIndustrylist" :key="index">
        <div class="iten_son" :style="personnel">
          <div class="personnelcolor">{{ item.count }}</div>
        </div>
        <div class="personnelcolor">{{ item.bodyindustry }}</div>
      </div> -->

      <!-- bodyIndustrylist -->
    </div>
    <div :style="dataBg" class="isfood_wapper" v-if="false">
      <!-- <div class="item" @click="showTable(6)">
        <div class="iten_son" :style="personnel">
          <div class="personnelcolor">
            {{isSpecialFood.circulationTotal}}
          </div>
        </div>
        <div class="personnelcolor">食品流通</div>
      </div> -->
      <div class="isfood" @click="showTable(7)">
        特殊食品 {{ isSpecialFood.isSpecialFoodCount }}家
      </div>
    </div>
    <!-- format -->
    <!-- <div class="Format">
      <div class="left" style="padding-top: 10px">
        <div
          class="item"
          v-for="(item, index) in data.bodyIndustrylist"
          :key="index"
          @click="showTable(index)"
        >
          <div class="iten_son" :style="note">
            <div class="Formatcolor">{{ item.count }}/{{ item.bodycount }}</div>
          </div>
          <div style="padding: 0 10px" class="Formatcolor">
            {{ item.bodyindustry.replace(/经营者/, "") }}
          </div>
        </div>
      </div>
      <div class="left">
        <div class="item" @click="showTable(7)">
          <div class="iten_son" :style="note">
            <div class="Formatcolor">
              {{ data.specialfood }}/{{ data.specialfoodbodyNum }}
            </div>
          </div>
          <div class="Formatcolor">特殊食品</div>
        </div>
        <div class="item" @click="showTable(8)">
          <div class="iten_son" :style="note">
            <div class="Formatcolor">
              {{ data.sYNCP }}/{{ data.sYNCPbodyNum }}
            </div>
          </div>
          <div class="Formatcolor">从事食用农产品</div>
        </div>

        <div class="item" @click="showTable(9)">
          <div class="iten_son" :style="note">
            <div class="Formatcolor">{{ data.lDP }}/{{ data.lDPbodyNum }}</div>
          </div>
          <div class="Formatcolor">从事冷藏冷冻农产品</div>
        </div>
      </div>
    </div> -->
    <rz-height></rz-height>

    <div class="title" :style="note">企业状况图</div>

    <rz-height></rz-height>
    <div style="padding-left: 20px">
      <div id="main" style="width: 100%; height: 280px"></div>
    </div>
    <rz-height></rz-height>
    <!-- <div style="padding-left:20px"> -->
    <div class="title" :style="note">
      食安指数
      <!-- </div> -->
    </div>

    <rz-height></rz-height>
    <div style="padding-left: 20px">
      <div id="column" style="width: 100%; height:250px"></div>
    </div>

    <!-- <query-dialog
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      width="80%"
      title="查看"
      @onconfirm="onconfirm"
      @oncancel="onconfirm"
      :type="type"
      :districtcode="districtcode"
    >
    </query-dialog> -->
  </div>
</template>
<script>
var echarts = require("echarts");
export default {
  props: {
    code: {
      type: String,
      default: "320500",
    },
  },
  // props:[],
  // 页面加载
  created() {
    if (this.code) {
      this.districtcode = this.code;
    }
  },
  // 页面加载完成
  mounted() {
    // this.query();
    // this.findCodeTotals();
    // this.findBodyIndustryTotals();
    Promise.all([
      this.findCodeTotals(),
      this.findBodyIndustryTotals(),
      this.findIsSpecialFoodTotals(),
    ]).then((res) => {
      this.list = res[0].data;
      this.column();
      this.indexList = res[1].data;
      this.columnLeft();
      this.isSpecialFood = res[2].data[0].superBodyindustryAndFoodResponse;
      this.loading = false;
    });

    if (!this.myChartleft) {
      this.myChartleft = echarts.init(document.getElementById("main"));
    }
    if (!this.myChartleftColumn) {
      this.myChartleftColumn = echarts.init(document.getElementById("column"));
    }
  },
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      data: {},
      note: {
        backgroundImage: "url(" + require("@/assets/images/bg_title.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      personnel: {
        backgroundImage: "url(" + require("@/assets/images/format.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      dataBg: {
        backgroundColor: "rgba(32,72,136,.1)",
      },
      myChartleft: "",
      myChartleftColumn: "",
      dialogVisible: false,
      type: 0,
      districtcode: "",
      list: [],
      indexList: [],
      isSpecialFood: {},
      loading: true,
    };
  },
  // 方法
  methods: {
    findIsSpecialFoodTotals() {
      return this.$http.findIsSpecialFoodTotals({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.isSpecialFood = res.data;
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },

    findBodyIndustryTotals() {
      return this.$http.findBodyIndustryTotals({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     // this.list=res.data
      //     this.indexList = res.data;
      //     // this.column();
      //     this.columnLeft();
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    findCodeTotals() {
      return this.$http.findCodeTotals({
        params: {
          parentCode: this.code,
        },
      });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.list = res.data;
      //     this.column();
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    setcard() {
      var option = {
        title: {
          top: 12,
          text: "各年龄段分布",
          //  subtext: '各区注册单位数',
          left: "center",
          textStyle: {
            fontSize: 16,
            color: "#ffffff",
          },
        },
        backgroundColor: "rgba(32,72,136,.2)",
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "18%",
          data: ["男", "女"],
          textStyle: {
            color: "white",
          },
        },
        calculable: true,
        xAxis: [
          {
            name: "年龄",
            axisLine: {
              lineStyle: {
                color: "white", //坐标轴的颜色
              },
            },
            type: "category",
            data: ["16-35", "36-45", "46-60", "60+"],

            // splitLine: {
            //   show: false,
            // },
          },
        ],
        grid: {
          left: "20%",
          bottom: "8%",
          top: "35%",
        },
        yAxis: [
          {
            type: "value",
            name: "人数",
            // interval: 10000,
            axisLabel: {
              // textStyle: {
              //   color: "white", //坐标的字体颜色
              // },
              formatter: "{value} ",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "white", //坐标轴的颜色
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "男",
            type: "bar",
            data: [
              this.data.man1635,
              this.data.man3545,
              this.data.man4560,
              this.data.manOver60,
            ],
            barWidth: 15,
            color: ["#437EB8"],
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
          },
          {
            name: "女",
            type: "bar",

            data: [
              this.data.woman1635,
              this.data.woman3545,
              this.data.woman4560,
              this.data.womanOver60,
            ],
            barWidth: 15,
            color: ["#EA4A97"],
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChartleft.setOption(option);
    },
    getdata() {
      console.log(131);
    },
    query() {
      return this.$http.queryInfo({ code: this.code });
      // .then(res => {
      //   if (res.code == 200) {
      //     this.data = res.data;
      //     // this.setcard();
      //   } else {
      //     this.$error(res.msg);
      //   }
      // })
      // .catch(err => {
      //   this.$error();
      //   console.log(err);
      // });
    },
    onconfirm() {
      this.dialogVisible = false;
    },
    showTable(e) {
      this.$router.push({
        name: "query",
        query: { code: this.code, type: e + "" },
      });
    },
    column() {
      // let option = {
      //   grid: {
      //     top: '35%',
      //   },
      //   legend: {
      //     top: '15%',
      //     data: [
      //       '餐饮服务经营者',
      //       '食品流通经营者',
      //       '食品生产经营者',
      //       '食品销售经营者',
      //       '单位食堂',
      //     ],
      //     textStyle: {
      //       color: 'white',
      //     },
      //   },
      //   title: {
      //     top: 13,
      //     text: '各区域单位业态分析',
      //     //  subtext: '各区注册单位数',
      //     left: 'center',
      //     textStyle: {
      //       fontSize: 16,
      //       color: '#ffffff',
      //       height: 50,
      //     },
      //   },
      //   calculable: true,
      //   backgroundColor: 'rgba(32,72,136,.1)',
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'shadow',
      //     },
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: this.list.map(x => x.areaName),
      //     // data: [],
      //     axisTick: { show: false },
      //     axisLine: {
      //       lineStyle: {
      //         color: '#FFF',
      //         type: 'solid', // solid、dashed、dotted
      //       },
      //     },
      //     axisLabel: {
      //       color: '#fff',
      //       fontSize: '12',
      //       interval: 0,
      //       rotate: 40,
      //     },
      //     nameRotate: 90,
      //   },
      //   yAxis: [
      //     {

      //       axisTick: { show: false },
      //       nameGap: 10,
      //       nameTextStyle: {
      //         color: '#FFF',
      //         fontSize: 14,
      //       },
      //       splitLine: {
      //         show: false,
      //       },
      //       axisLine: {
      //         lineStyle: {
      //           color: "white",
      //           type: 'dashed',
      //           opacity: '0.25',
      //         },
      //       },
      //     },
      //     {
      //       axisTick: { show: false },
      //       splitLine: {
      //         lineStyle: {
      //           color: '#FFF',
      //           type: 'dashed',
      //         },
      //       },
      //       axisLine: {
      //         lineStyle: {
      //           color: '#FFF',
      //           type: 'dashed',
      //         },
      //       },
      //     },
      //   ],
      //   series: [...[
      //     {
      //       key: 'cateringBusinessTotal',
      //       value: '餐饮服务经营者',
      //     },
      //     {
      //       key: 'circulationTotal',
      //       value: '食品流通经营者',
      //     },
      //     {
      //       key: 'foodProductionTotal',
      //       value: '食品生产经营者',
      //     },
      //     {
      //       key: 'foodSalesTotal',
      //       value: '食品销售经营者',
      //     },
      //     {
      //       key: 'unitCanteenTotal',
      //       value: '单位食堂',
      //     },
      //   ].map((x, index) => {
      //     let list = {
      //       name: x.value,
      //       type: 'bar',
      //       data: [],
      //       stack: '1',
      //       barWidth: 15,
      //       label: {
      //         show: true,
      //         position: 'top',
      //         color: '#fff',
      //         formatter: param => {
      //           if (param.componentIndex == 4) {
      //             for (let index = 0; index < this.list.length; index++) {
      //               return this.$_.values(
      //                 this.list[param.dataIndex].superBodyindustryResponse
      //               ).reduce((acc, cur) => {
      //                 return acc + cur;
      //               });
      //             }
      //           }
      //           return '';
      //         },
      //       },
      //     };
      //     list.data = this.list.map(z => z.superBodyindustryResponse[x.key]);
      //     return list;
      //   }),

      //   ]
      // };

      //           let	option = {
      // 	color: ['#008000', '#ffd700', '#ff0000'],
      // 	backgroundColor:'rgba(32,72,136,.1)',
      // 	// backgroundColor:"#00ff00",
      // 	tooltip: {
      // 		triggerOn: 'click'
      // 	},
      // 	radar: {
      // 		name: {
      // 			show: false
      // 		},
      // 		indicator: [{
      // 				name: 'A',
      // 				max:100
      // 			},
      // 			{
      // 				name: 'B',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'C',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'D',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'E',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'F',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'G',
      // 				max: 100
      // 			},
      // 			{
      // 				name: 'H',
      // 				max: 100
      // 			}
      // 		],
      // 		center: ['50%', '20%'],
      // 		radius: '100%',
      // 		axisLine: {
      // 			show: false
      // 		},
      // 		splitLine: {
      // 			show: false
      // 		},
      // 		splitArea: {
      // 			show: false
      // 		}
      // 	},
      // 	series: [{
      // 		type: 'radar',
      // 		areaStyle: {
      // 			opacity: 1,
      // 			shadowBlur: 1,
      // 			shadowColor: 'rgba(0,0,0,.5)',
      // 		},
      // 		emphasis: {
      // 			areaStyle: {
      // 				opacity: 0
      // 			}
      // 		},
      // 		silent: true,
      // 		data: [{
      // 				value: [0, 0, 0, 100, 100, 99, 0, 0],
      // 				name: '湖南',
      // 				symbol: 'circle',
      // 				symbolSize: 1,
      // 				label: {
      //              color:"#fff",
      // 					show: true,
      // 					position: [-10, -10],
      // 					formatter: function(point) {
      // 						if(point.value == 99)
      // 							return "—— 5." + point.name
      // 						else
      // 							return ''
      // 					},
      // 				}

      // 			},
      // 			{
      // 				value: [0, 0, 0, 66, 66, 67, 0, 0],
      // 				name: '安徽',
      // 				symbol: 'circle',
      // 				symbolSize: 1,
      // 				label: {
      // 					show: true,
      //              color:"#fff",

      // 					position: [-10, -10],
      // 					formatter: function(point) {
      // 						if(point.value == 67)
      // 							return "——1." + point.name
      // 						else
      // 							return ''
      // 					},
      // 				}
      // 			},
      // 			{
      // 				value: [0, 0, 0, 33, 33, 35, 0, 0],
      // 				name: '北京',
      // 				symbol: 'circle',
      // 				symbolSize: 1,
      // 				label: {
      // 					show: true,
      //              color:"#fff",

      // 					position: [-10, -10],
      // 					formatter: function(point) {
      // 						if(point.value == 35)
      // 							return "—— 3." + point.name
      // 						else
      // 							return ''
      // 					},
      // 				}
      // 			},
      // 			// {
      // 			// 	value: [0, 0, 0, 39, 40, 40, 0, 0],
      // 			// 	name: '江苏',
      // 			// 	symbol: 'circle',
      // 			// 	symbolSize: 1,
      // 			// 	label: {
      // 			// 		show: true,
      // 			// 		position: [-55, -10],
      // 			// 		formatter: function(point) {
      // 			// 			if(point.value == 39)
      // 			// 				return "2." + point.name + " ——"
      // 			// 			else
      // 			// 				return ''
      // 			// 		},
      // 			// 	}
      // 			// },
      // 			// {
      // 			// 	value: [0, 0, 0, 20, 20, 19, 0, 0],
      // 			// 	name: '上海',
      // 			// 	symbol: 'circle',
      // 			// 	symbolSize: 1,
      // 			// 	label: {
      // 			// 		show: true,
      // 			// 		position: [-5, -10],
      // 			// 		formatter: function(point) {
      // 			// 			if(point.value == 19)
      // 			// 				return "—— 1." + point.name
      // 			// 			else
      // 			// 				return ''
      // 			// 		},
      // 			// 	}
      // 			// }
      // 		]
      // 	}],
      // 	itemStyle: {
      // 		emphasis: {
      // 			show: false,
      // 			shadowBlur: 10,
      // 			shadowOffsetX: 0,
      // 			shadowColor: 'rgba(0, 0, 0, 0.5)'
      // 		}
      // 	}
      // };
      let option = {
        backgroundColor: "rgba(32,72,136,.2)",
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c}%",
            					formatter: function(e) {
                            return `${e.data.name}分共有${e.data.tip}家,占${e.data.Proportion}`
      					},
        },
         legend: {
          left: "25%",
          top: 10,
          data: ["80+", "60-79", "0-59"],
          textStyle:{
          color: "white",

          }
        },
        	color: [ '#008000', '#ffd700','#ff0000'],
        series: [
          {
            name: "金字塔",
            type: "funnel",
            width: "70%",
            height: "70%",
            left: "1%",
            top: "25%",
            sort: "ascending",
            data: [
              {tip:this.list.fractionOne,Proportion:this.list.percentageOne ,value: 100, name: "80+" },
              { tip:this.list.fractionTwo,Proportion:this.list.percentageTwo,value: 66, name: "60-79" },
              { tip:this.list.fractionThree,Proportion:this.list.percentageThree,value: 33, name: "0-59" },
            ],
            // itemStyle: {
            //   normal: {
            //     label: {
            //       show: true, //隐藏文字
            //     },
            //     labelLine: {
            //       show: true, //隐藏指示线
            //     },
            //     borderWidth: 3, // 间距的宽度
            //     borderColor: "#0D1d50", //背景色

            //     opacity: 0.8,
            //   },
            // },
            label: {
              color: "#fff",
              show: true,
              		formatter: function(e) {
                            return `${e.data.tip}家(${e.data.Proportion})`
      					},
            },
            itemStyle: {
              borderColor: "#0D1d50",
              borderWidth: 4,
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChartleft.setOption(option);
    },
    columnLeft() {
      var option = {
        // title: {
        //   top: 12,
        //   text: '单位业态食安指数分析',
        //   //  subtext: '各区注册单位数',
        //   left: 'center',
        //   textStyle: {
        //     fontSize: 16,
        //     color: '#ffffff',
        //   },
        // },
        backgroundColor: "rgba(32,72,136,.1)",
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow',
        //   },
        // },
        // legend: {
        //   top: '15%',
        //   data: [
        //     '餐饮服务经营者',
        //     '食品流通经营者',
        //     '食品生产经营者',
        //     '食品销售经营者',
        //     '单位食堂',
        //   ],
        //   textStyle: {
        //     color: 'white',
        //   },
        // },
          legend: {
          left: "25%",
          top: 10,
          data: ["最高", "平均", "最低"],
          textStyle:{
          color: "white",

          }
        },
          tooltip: {
        trigger: 'axis',
          // formatter: "{a} <br/>{b} : {c}%",
            					formatter: function(e) {
                        return `${e[0].axisValue} <br/>最高${e[0].data}<br/>平均${e[1].data}<br/>最低${e[2].data}`
                          
      					},
                axisPointer: {
			type: 'shadow',
			label: {
				backgroundColor: '#6a7985'
			}
		},
        },
        calculable: true,
        xAxis: [
          {
            name: "单位业态",
            axisLine: {
              lineStyle: {
                color: "white", //坐标轴的颜色
              },
            },
            axisLabel:{
rotate:"45",
 fontSize :"12"
            },
            type: "category",
            data: ["食品生产", "餐饮服务", "单位食堂", "食品流通"],
            // nameRotate:"45"
          },
        ],
        grid: {
          left: "15%",
          bottom: "25%",
          top: "25%",
          right:"20%"
        },
        yAxis: [
          {
            type: "value",
            name: "食安指数",
            // interval: 10000,
            axisLabel: {
              formatter: "{value}",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "white", //坐标轴的颜色
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],

        series: [
          // {
          //   name: '餐饮服务经营者',
          //   type: 'bar',
          //   //  key:'cateringBusinessTotal',
          //   //       //  value: "餐饮经营者"
          //   //       // },
          //   //       //    {
          //   //       //  key:'circulationTotal',
          //   //       //  value: "食品流通经营者"
          //   //       // },   {
          //   //       //  key:'foodProductionTotal',
          //   //       //  value: "食品生产经营者"
          //   //       // },   {
          //   //       //  key:'foodSalesTotal',
          //   //       //  value: "食品销售经营者"
          //   //       // },   {
          //   //       //  key:'unitCanteenTotal',
          //   //       //  value: "单位食堂经营者"
          //   data: [
          //     this.indexList.man0079['cateringBusinessTotal'],
          //     this.indexList.man7990['cateringBusinessTotal'],
          //     this.indexList.man9000['cateringBusinessTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },

          // {
          //   name: '食品流通经营者',
          //   type: 'bar',
          //   data: [
          //     this.indexList.man0079['circulationTotal'],
          //     this.indexList.man7990['circulationTotal'],
          //     this.indexList.man9000['circulationTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },

          // {
          //   name: '食品生产经营者',
          //   type: 'bar',
          //   data: [
          //     this.indexList.man0079['foodProductionTotal'],
          //     this.indexList.man7990['foodProductionTotal'],
          //     this.indexList.man9000['foodProductionTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },

          // {
          //   name: '食品销售经营者',
          //   type: 'bar',
          //   data: [
          //     this.indexList.man0079['foodSalesTotal'],
          //     this.indexList.man7990['foodSalesTotal'],
          //     this.indexList.man9000['foodSalesTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },
          // {
          //   name: '单位食堂',
          //   type: 'bar',
          //   data: [
          //     this.indexList.man0079['unitCanteenTotal'],
          //     this.indexList.man7990['unitCanteenTotal'],
          //     this.indexList.man9000['unitCanteenTotal'],
          //   ],
          //   barWidth: 15,
          //   label: {
          //     show: true,
          //     position: 'top',
          //     color: '#fff',
          //   },
          // },
          {
            name: "最高",
            data: [this.indexList[2].max, this.indexList[3].max, this.indexList[0].max,this.indexList[1].max],
            type: "line",
            areaStyle: {
              opacity: 0.1,
            },
            // itemStyle: {
            //   normal: {
            //     color: "#4adefe",
            //   },
            // },
          },
          {
            name: "平均",
            areaStyle: {
              opacity: 0.1,
            },
               data: [this.indexList[2].avg, this.indexList[3].avg, this.indexList[0].avg,this.indexList[1].avg],
            type: "line",
            // itemStyle: {
            //   normal: {
            //     color: "#00ff00",
            //   },
            // },
          },
           {
            name: "最低",
            areaStyle: {
              opacity: 0.1,
            },
          data: [this.indexList[2].min, this.indexList[3].min, this.indexList[0].min,this.indexList[1].min],
            type: "line",
            // itemStyle: {
            //   normal: {
            //     color: "#00ff00",
            //   },
            // },
          },
        ],
      };
      this.myChartleftColumn.setOption(option);
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    // "query-dialog": () => import("@/views/monitoring/components/query"),
  },
  // 计算属性
  computed: {
    opened: () => store.state.app.sidebar.opened,
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  .top {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100px;
      // width: 100px;
      flex: 1;
      // max-width: 130px;
      cursor: pointer;
      .iten_son {
        display: flex;
        align-items: top;
        text-align: center;
        justify-content: center;
        // height: 100%;
        width: 70px;
        // flex: 1;
        // width: 100%;
        min-height: 70px;
        color: #4adefe;
        border-radius: 50%;
        // border: 5px  solid #62BCE1;
      }
    }
  }

  //  .top {
  //   padding: 10px 0;
  //   display: flex;
  //   flex-wrap: wrap;
  //   justify-content: space-evenly;
  //   .item {
  //     height: 100px;
  //     flex: 1;
  //     // width: 100px;
  //     padding: 10px;
  //     .iten_son {
  //       display: flex;
  //       align-items: center;
  //       text-align: center;
  //       flex-direction: column;
  //       justify-content: center;
  //       height: 100%;
  //       color: #4adefe;
  //       font-size: 12px;
  //       border-radius: 50%;
  //       // border: 5px  solid #62BCE1;
  //     }
  //   }
  // }
  .left {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100px;
      //  width: 100px;
      // max-width: 130px;
      flex: 1;
      cursor: pointer;
      .iten_son {
        display: flex;
        align-items: center;
        justify-content: center;
        // flex: 1;
        min-height: 90px;
        min-width: 90px;
        color: #4adefe;
        border-radius: 50%;
        // border: 5px  solid #62BCE1;
      }
    }
  }

  .personnelcolor {
    color: #ffffff;
    text-align: center;
    height: 30px;
    line-height: 30px;
  }
  .personnelNumber {
    color: #4adefe;
    text-align: center;
    font-size: 20px;
    height: 30px;
    line-height: 30px;
  }
  .Formatcolor {
    color: #6ee8df;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .Format {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    background-color: rgba(32, 72, 136, 0.1);
    // 下面的代码注释了
    // .item {
    //   width: 48%;
    //   border-radius: 5px;
    //   // flex:1;
    //   padding: 10px;
    //   border: 1px solid #0660ba;
    //   color:#01C8E7;
    //   .iten_son_header {
    //     display: flex;
    //     padding-bottom: 10px;
    //     border-bottom: 1px solid #08c7f1;
    //     .left {
    //       width: 70px;
    //       height: 70px;
    //       border-radius: 50%;
    //       border: 2px solid #0571be;
    //       img {
    //         width: 30px;
    //         height: 30px;
    //       }
    //       > div {
    //         font-size: 12px;
    //         text-align: center;
    //         color: #00e2fb;
    //       }
    //     }
    //     .right {
    //       // display: flex;
    //       // justify-content: center;
    //       // align-items: center;
    //       flex: 1;
    //       display: flex;

    //       flex-direction: column;
    //       justify-content: space-evenly;

    //       > div {
    //         text-align: center;
    //       }
    //     }
    //   }
    //   .iten_son_body {
    //     display: flex;
    //     margin-top: 10px;

    //     .left_item {
    //       flex: 1;
    //       display: flex;
    //       justify-content: space-between;
    //       .title{
    //         font-size: 14px;
    //       }
    //     }
    //   }
    // }
    // .item:nth-child(1) {
    //   margin-bottom: 10px;
    // }
    // .item:nth-child(2) {
    //   margin-bottom: 10px;
    // }
  }
  .isfood_wapper {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    .isfood {
      color: yellow;
      text-align: center;
      background: url("../../../../assets/images/isFood.png");
      //  backgroundRepeat: "no-repeat",
      //     backgroundSize: "100% 100%",
      background-repeat: no-repeat;
      background-size: "100% 100%";
      width: 150px;
      background-position: center;
      cursor: pointer;
    }
  }
  .title {
    width: 40%;
    text-align: left;
    color: #ffffff;
    padding: 8px 35px;
  }
}
</style>
